<template>
  <div>
    <div id="breadcrumb">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/admin/role">角色列表</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>{{ this.$route.params.id > 0 ? '编辑' : '新增' }}</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <a-card :bordered="false">
      <template>
        <a-form :form="form" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }" @submit="handleSubmit">
          <a-form-item label="角色名称">
            <a-input
                v-decorator="['name', { rules: [{ required: true, message: '请输入角色名称' }] }]"
            />
          </a-form-item>
          <a-divider dashed/>
          <a-form-item label="菜单权限">
            <template>
              <a-tree
                  v-model="checkedKeys"
                  checkable
                  :expanded-keys="expandedKeys"
                  :auto-expand-parent="true"
                  :selected-keys="selectedKeys"
                  :tree-data="treeData"
                  @expand="onExpand"
                  @select="onSelect"
              />
            </template>
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 12, offset: 8 }">
            <a-button type="primary" html-type="submit">
              保存
            </a-button>
          </a-form-item>
        </a-form>
      </template>
    </a-card>
  </div>
</template>

<script>
export default {
  name: "AdminEdit",
  data() {
    return {
      form: null,
      treeData: [],
      expandedKeys: [],
      checkedKeys: [],
      selectedKeys: [],
    }
  },
  watch: {
    checkedKeys(val) {
      console.log('onCheck', val);
    },
  },
  mounted() {
    if (this.$route.params.id > 0) {
      this.first()
    }
    this.form = this.$form.createForm(this)
    this.fetchMenu()
  },
  methods: {
    first() {
      this.$http.get(`api/admin/role/${this.$route.params.id}`).then((result) => {
        this.checkedKeys = result.menu
        this.form.setFieldsValue({
          name: result.name
        })
      })
    },
    fetchMenu() {
      this.$http.get('api/admin/role/menu').then((result) => {
        this.treeData = result
      })
    },
    handleSubmit: function () {
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          values.menus = this.checkedKeys
          this.$confirm({
            title: '确认操作',
            content: '保存后将无法撤回',
            onOk: () => this.$http.post(`api/admin/role?id=${this.$route.params.id}`, values).then((result) => {
              this.$message.success('编辑成功')
              this.$router.replace('/admin/role')
            }, (error) => {
              this.$message.error(error.message)
            })
          });
        }
      });
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onCheck(checkedKeys) {
      this.checkedKeys = checkedKeys;
    },
    onSelect(selectedKeys) {
      this.selectedKeys = selectedKeys;
    },
  }
}
</script>

<style scoped>
#breadcrumb {
  margin-top: 0;
  margin-bottom: 10px;
}
</style>